<template>
  <div class="common-search clearfix" style="display: inline-block; float: left">
    <el-select
      v-model="value1"
      placeholder="省"
      :clearable="true"
      @change="provincehandleChange()"
    >
      <el-option
        v-for="item in province"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      >
      </el-option>
    </el-select>
    <el-select
      v-model="value2"
      placeholder="市"
      :clearable="true"
      @change="cityhandleChange()"
    >
      <el-option
        v-for="item in city"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      >
      </el-option>
    </el-select>
    <el-select
      v-model="value3"
      placeholder="区"
      :clearable="true"
      @change="areahandleChange()"
    >
      <el-option
        v-for="item in area"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      >
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  name: "search",
  data() {
    return {
      province: [],
      city: [],
      area: [],
      value1: "", //省
      value2: "", //市
      value3: "", //区
      message: {
        provincecode: "",
        citycode: "",
        districtcode: "",
      },
    };
  },
  watch: {
    message: {
      handler(newValue, oldValue) {
        this.$emit("childFn", newValue);
      },
      deep: true,
    },
  },
  methods: {
    //省市联动
    getarea() {
      let params = {
        superCode: this.superCode || "",
      };
      this.$http
        .post("/area/getChild", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.province = res.data.b;
          }
        })
        .catch((err) => {});
    },
    provincehandleChange() {
      this.city = [];
      this.value2 = "";
      this.area = [];
      this.value3 = "";
      let params = {
        superCode: this.value1 || "",
      };
      this.$http
        .post("/area/getChild", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.city = res.data.b;
            this.message.provincecode = this.value1;
            this.message.citycode = this.value2;
            this.message.districtcode = this.value3;
          }
        })
        .catch((err) => {});
    },
    cityhandleChange() {
      this.area = [];
      this.value3 = "";
      let params = {
        superCode: this.value2 || "",
      };
      this.$http
        .post("/area/getChild", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.area = res.data.b;
            this.message.provincecode = this.value1;
            this.message.citycode = this.value2;
            this.message.districtcode = this.value3;
          }
        })
        .catch((err) => {});
    },
    areahandleChange() {
      this.message.provincecode = this.value1;
      this.message.citycode = this.value2;
      this.message.districtcode = this.value3;
    },
  },
  mounted() {
    this.getarea();
    this.$emit("childFn", this.message);
  },
};
</script>
<style scoped>
.common-search {
  display: inline-block;
}
.common-search .el-select {
  float: left;
  width: 120px;
  margin-right: 10px;
}
.common-search /deep/ .el-input--suffix .el-input__inner {
  background-color: transparent !important;
}
</style>